<script setup>
import VxeGridPro from '@/components/VxeGridPro/index.vue'
// import { VxeGridPro } from '@/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
 //import { VxeGridPro } from '@cimom/ci-web-plugins-commom'
 // import VxeGridPro from '@cimom/ci-web-plugins-commom/VxeGridPro'
import { reactive,ref } from 'vue'
const gridOptions = reactive({
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name111' ,slots: { header: 'header_name' }},
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
function currentRowChange(params){
  alert(params.row.name)
}
</script>

<template>
  <VxeGridPro
  @current-row-change="currentRowChange"
  :stripe="true"
  :border="false"
  :rowConfig="{
    isCurrent: true,
    isHover: true
  }" 
  :columns="gridOptions.columns"
  :data="gridOptions.data"
  :proOptions="{ align: 'left' }"
>
<template #top>
  hello top template
</template>
 <template #header_name>
        <div class="first-col">
          <div class="first-col-top">名称1</div>
          <div class="first-col-bottom">序号2</div>
        </div>
  </template>
<template #bottom>
  hello bottom template
</template>
</VxeGridPro>

</template>

<style scoped>

</style>
